<template>
  <div class="todo-box">
    <div class="top-nav">
      <div class="title">
        <img src="../../assets/todo.png" alt="" />
        <span> TodoList </span>
      </div>
    </div>
    <div class="addTodo">
      <input
        type="text"
        id="newtodo"
        v-model="todoTitle"
        @keyup.enter="addTodo"
        placeholder="AddTodo..."
      />
      <button id="btnAdd" class="btn" @click="addItem">
        <van-icon name="add-o" />Add
      </button>
      <button id="delAll" class="btn" @click="delAll">
        <van-icon name="delete-o" />Clean All
      </button>
      <!-- <button @click="send">发送</button>
      <button @click="getDataFromNet">获取服务器所有</button> -->
    </div>
    <!-- 保存 -->

    <van-tabs>
      <van-tab
        v-for="(item, index) in tabList"
        :title="item.title"
        :key="index"
        :badge="item.badge"
      >
        <!-- <p>{{item}}</p> -->
        <items
          :mainTitle="item.title"
          :datalist="item.datalist"
          :todoLists="todoLists"
        ></items>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch, defineProps } from "vue";
import getData from "./data";
import toDoFunc from "./operation";
import items from "./components/items.vue";
import request from "../../network/request";
//import getTodoLists from './watchtodolist';

//const { todoLists }= getTodoLists()
//  const todoTitle = ref('')

const { todoLists, todoTitle, tabList } = getData();

const { addTodo } = toDoFunc(todoLists, todoTitle);
const { delAll } = toDoFunc(todoLists);
// 服务器相关
// 测试请求
const send = () => {
  request.testGet();
  request.testPost();
};
const getId = () => {
  return Date.now() + Math.random().toString(16).substr(2, 4);
};
// 添加todo
const addItem = () => {
  // fetch('/api/string',{}).then(res=>console.log(res))
  let itemstr = todoTitle.value.trim();
  if (itemstr) {
    let itemObj = {
      id: getId(),
      completed: false,
      title: itemstr,
    };
    addTodo(itemObj);
    request.saveTodoItem(itemObj);
  }
};
// 获取服务器todo
const getDataFromNet = () => {
  request.getAllTodoItems();
};
</script>

<style>
.todo-box {
  text-align: center;
}
.addTodo {
  margin: 30px 30px 10px 10px;
  text-align: center;
  vertical-align: middle;
}
.title {
  text-align: center;
  height: 50px;
}
#newtodo {
  width: 320px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid #999;
  padding-left: 5px;
}
.van-icon {
  margin-right: 5px;
}
.btn {
  /* width: 50px; */
  padding: 10px;
  border: none;
  outline: none;
  height: 40px;
  margin-left: 20px;
  border-radius: 5px;
  background-color: #028a8e;
  color: #fff;
}

a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #028a8e;
}
a.active {
  color: #028a8e;
}
.van-tabs__nav {
  display: block !important;
}
.van-tab--active .van-tab__text {
  font-weight: 600;
  font-size: large;
}
.van-tab--active {
  background-color: #e9edf0 !important;
}
.top-nav {
  box-shadow: 0px 0px 8px 3px #ccc;
  height: 60px;
  line-height: 60px;
  padding: 10px;
}
.top-nav .title {
  text-align: left;
  margin-left: 60px;
}
.top-nav span {
  font-size: 26px;
  font-weight: 800;
}
.top-nav img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.van-tabs__line {
  display: none;
}
.van-badge {
  background-color: #028a8e !important;
}
.van-tabs__nav {
  margin-left: 60px;
  height: 500px;
  float: left;
  border-radius: 30px;
  margin-top: 30px;
}
.van-tabs__wrap {
  overflow: initial !important;
}
.van-tab {
  width: 200px;
  height: 50px;
  background-color: #f9f7fa;
  padding: 10px;
}
</style>
